<template>
  <div :style="{width:calTotalWidth(initMapWidth)}">
    <el-container>
      <el-header v-if="initToolHeader" height="36px">
        <radar-select
          :init-product-value="productValue"
          :init-default-product="defaultProduct"
          :init-product-option="computedProductOption"
          @basemap_change="handleBasemapChange"
          @product_change="handleProductChange"
        />
      </el-header>
      <el-container>
        <el-aside
          v-if="initInfoLeft"
          :width="calSize(initInfoWidth)"
          style="border:1px solid #dcdfe6;"
        >
          <info-bar
            :init-station-name="computedStationName"
            :init-product-name="computedProductName"
            :init-elev="computedElevLabel"
            :init-datetime-label="computedDatetimeLabel"
            :init-level-img="computedLevelImg"
            :init-min-color="minColor"
            :init-max-color="maxColor"
            @slider_change="handleSliderChange"
          />
        </el-aside>
        <el-main>
          <div
            ref="cinradMap"
            :id="id"
            :style="{width:calSize(initMapWidth), height:calSize(initMapHeight)}"
          />
        </el-main>
        <el-aside
          v-if="initInfoRight"
          :width="calSize(initInfoWidth)"
          style="border:1px solid #dcdfe6;"
        >
          <info-bar
            :init-station-name="computedStationName"
            :init-product-name="computedProductName"
            :init-elev="computedElevLabel"
            :init-datetime-label="computedDatetimeLabel"
            :init-level-img="computedLevelImg"
            :init-min-color="minColor"
            :init-max-color="maxColor"
            @slider_change="handleSliderChange"
          />
        </el-aside>
      </el-container>
      <el-footer v-if="initToolFooter" height="36px">
        <radar-select
          :init-product-value="productValue"
          :init-default-product="defaultProduct"
          :init-product-option="computedProductOption"
          @basemap_change="handleBasemapChange"
          @product_change="handleProductChange"
        />
      </el-footer>
      <el-footer v-if="initOverlayType" height="36px">
        <overlay-select
          @product_change2="handleProductChange2"
          @product_change3="handleProductChange3"
        />
      </el-footer>
    </el-container>
    <div id="popup" ref="cinradPopup" class="ol-popup">
      <a id="popup-closer" ref="cinradPopupCloser" href="#" class="ol-popup-closer"/>
      <div id="popup-content" ref="cinradPopupContent"/>
      <tree-view :data="jsonSource" :options="{maxDepth: 3,rootObjectKey: 'Feature'}"/>
    </div>
  </div>
</template>

<script>
import RadarSelect from './radarSelect'
import OverlaySelect from './overlaySelect'
import InfoBar from './infoBar'
import {
  number2size,
  calCinradOption,
  calCinradCenter,
  calElevLabel,
  calCinradLevel2Option,
  compareArraysEqual
} from '@/utils/cinrad'

import dayjs from 'dayjs'

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import ImageLayer from 'ol/layer/Image'
import ImageWMS from 'ol/source/ImageWMS'
import WMTS from 'ol/source/WMTS'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls, FullScreen } from 'ol/control'
import { Fill, RegularShape, Stroke, Style } from 'ol/style.js'
import Point from 'ol/geom/Point.js'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import Feature from 'ol/Feature.js'

import Overlay from 'ol/Overlay.js'

import { GeoJSON } from 'ol/format.js'

import { toStringHDMS } from 'ol/coordinate.js'

import MousePosition from 'ol/control/MousePosition.js'
import { createStringXY } from 'ol/coordinate.js'
import Select from 'ol/interaction/Select.js'

import {
  getWidth as getExtentWidth,
  getTopLeft as getExtentTopLeft
} from 'ol/extent'

import { get as getProjection } from 'ol/proj'
import { register } from 'ol/proj/proj4'
import proj4 from 'proj4'

export default {
  name: 'CinradMap',
  components: { RadarSelect, InfoBar, OverlaySelect },
  props: {
    logName: {
      type: String,
      default: 'CinradMap:'
    },
    initDefaultProduct: {
      type: String,
      default: '0'
    },
    initOverlayType: {
      type: Boolean,
      default: false
    },
    initMapWidth: {
      type: Number,
      default: 700
    },
    initMapResolution: {
      type: Number,
      default: null
    },
    initMapCenter: {
      type: Array,
      default: function() {
        return null
      }
    },
    initMapHeight: {
      type: Number,
      default: 700
    },
    initInfoWidth: {
      type: Number,
      default: 150
    },
    initToolHeader: {
      type: Boolean,
      default: true
    },
    initToolFooter: {
      type: Boolean,
      default: false
    },
    initInfoLeft: {
      type: Boolean,
      default: true
    },
    initInfoRight: {
      type: Boolean,
      default: false
    },
    initZoom: {
      type: Number,
      default: 8
    },
    initMaxZoom: {
      type: Number,
      default: 180
    },
    initProductValue: {
      type: Array,
      default: function() {
        return ['Z9200', '19', '2']
      }
    },
    initMinColor: {
      type: Number,
      default: 0
    },
    initMaxColor: {
      type: Number,
      default: 15
    },
    initDatetime: {
      type: Array,
      default: function() {
        [['Z9200', '19', '2'], '2000-01-01T08:00:00Z']
      }
    },
    initLayersVisible: {
      type: Array,
      default: function() {
        if (this.initOverlayType) {
          return this.appOptions.layerOption['overlayVisibleLayers']
        } else {
          return this.appOptions.layerOption['defaultVisibleLayers']
        }
      }
    },
    initLayersOpacity: {
      type: Array,
      default: function() {
        return this.appOptions.layerOption['layersOpacity']
      }
    },
    initMousePositionId: {
      type: String,
      default: 'mouse-position'
    },
    initMouseCoordinate: {
      type: Array,
      default: function() {
        return [0, 0]
      }
    },
    initSelectedRegion: {
      type: Array,
      default: function() {
        return ['4406', '440605']
      }
    },
    initExtent: {
      type: Array,
      default: function() {
        return [108, 18, 119, 27]
      }
    },
    initFeatures: {
      type: Array,
      default: function() {
        return []
      }
    },
    fill: {
      type: Object,
      default: function() {
        return new Fill({ color: 'red' })
      }
    },
    stroke: {
      type: Object,
      default: function() {
        return new Stroke({ color: 'black', width: 2 })
      }
    }
  },
  data() {
    return {
      id: null,
      defaultProduct: this.initDefaultProduct,

      productValue: this.initProductValue,
      overlay3ProductValue: ['Z0000', '19', '0'],
      overlay4ProductValue: ['Z0000', '19', '0'],
      datetime: dayjs(this.initDatetime[1]),

      olMap: null,
      zoom: this.initZoom,
      maxZoom: this.initMaxZoom,

      basemapValue: this.appOptions.basemapOption[0].value,
      selectedRegion: calCinradLevel2Option(
        this.initSelectedRegion,
        this.appOptions.regionOption
      ),

      minColor: this.initMinColor,
      maxColor: this.initMaxColor,

      mouseStyles: {
        cross: new Style({
          image: new RegularShape({
            fill: this.fill,
            stroke: this.stroke,
            points: 4,
            radius: 10,
            radius2: 0,
            angle: 0
          })
        })
      },
      mouseFeature: new Feature({
        geometry: new Point([0, 0])
      }),
      mouseFeatureId: 'mouseFeatureId',

      jsonSource: {},
      vectorSource: new VectorSource(),
      dayFormatTemplate: 'YYYY-MM-DDTHH:mm[Z]',
      overlay: null,
      closer: null,
      selectSingleClick: null
    }
  },
  computed: {
    computedDatetimeLabel: function() {
      return this.datetime.format('MM-DDTHH:mm')
    },
    computedElevLabel: function() {
      return calElevLabel(this.productValue, this.appOptions.productOption)
    },

    computedLevelImg: function() {
      return this.appOptions.levelImgURL + this.productValue[1] + '.png'
    },
    computedProductName: function() {
      return this.appOptions.productNameOption[this.productValue[1]]
    },

    computedRangeCqlFilter: function() {
      // console.log('adcode=' + "'" + this.selectedRegion['value'] + "'")
      return 'adcode=' + "'" + this.selectedRegion['value'] + "'"
    },
    computedStationName: function() {
      return this.appOptions.stationNameOption[this.productValue[0]]
    },
    computedProductOption: function() {
      // console.debug(this.appOptions.productOption)
      const _tmp = JSON.parse(JSON.stringify(this.appOptions.productOption))

      // console.debug('computedProductOption')
      // console.debug(_tmp)
      const _product = this.defaultProduct
      if (_product !== '0') {
        _tmp.forEach(function(val, index) {
          const _arr = val['children']
          let i = _arr.length
          while (i--) {
            if (_arr[i]['value'] !== _product) {
              _arr.splice(i, 1)
            }
          }
        })

        let j = _tmp.length
        while (j--) {
          if (_tmp[j]['children'].length === 0) {
            _tmp.splice(j, 1)
          }
        }
      }
      // console.debug('_product')

      return _tmp
    }
  },
  watch: {
    initProductValue: function(newVal, oldVal) {
      if (newVal) {
        console.debug('initMapCenter:' + newVal + ':' + oldVal)
        this.productValue = newVal
      }
    },
    initMapCenter: function(newVal, oldVal) {
      if (newVal) {
        // console.debug('initMapCenter:' + newVal + ':' + oldVal)
        this.handleCenterChange(newVal)
      }
    },
    initMapResolution: function(newVal, oldVal) {
      if (newVal) {
        // console.debug('initMapResolution:' + newVal + ':' + oldVal)
        this.handleResolutionChange(newVal)
      }
    },
    initLayersOpacity: function(newVal, oldVal) {
      // console.debug(newVal)
      if (
        this.olMap &&
        this.olMap.getLayers().getArray().length === 8 &&
        newVal &&
        newVal.length === 8
      ) {
        const layers = this.olMap.getLayers().getArray()
        for (let i = 0; i < newVal.length; i++) {
          if (newVal[i] / 100 !== layers[i].getOpacity()) {
            layers[i].setOpacity(newVal[i] / 100)
          }
        }
      }
    },
    // 如果 `initDatetime` 发生改变，这个函数就会运行
    initDatetime: function(newLabel, oldLabel) {
      console.debug(
        this.logName + 'initDatetime Change:' + newLabel + '----' + oldLabel
      )

      if (this.overlay) {
        this.overlay.setPosition(undefined)
        this.closer.blur()
      }

      if (this.selectSingleClick) {
        this.selectSingleClick
          .getOverlay()
          .getSource()
          .clear()
      }

      this.datetime = dayjs(newLabel[1])
      console.debug(this.logName + this.datetime)

      this.updateCinrad()
    },
    initMouseCoordinate: function(newVal, oldVal) {
      // console.debug(
      //  this.logName + 'initMouseCoordinate Change:' + newVal + '----' + oldVal
      // )
      this.handlePointermove(newVal)
    },
    initSelectedRegion: function(newVal, oldVal) {
      this.selectedRegion = calCinradLevel2Option(
        newVal,
        this.appOptions.regionOption
      )

      this.handleCenterChange([
        this.selectedRegion['cx'],
        this.selectedRegion['cy']
      ])

      if (!this.olMap) {
        return
      }

      const layers = this.olMap.getLayers().getArray()
      if (layers.length === 8) {
        if (layers[4].getVisible()) {
          layers[4].getSource().updateParams({
            cql_filter: this.computedRangeCqlFilter
          })
        }
      }
      // this.updateCinrad()
    },
    initLayersVisible: function(newVal, oldVal) {
      console.debug(
        this.logName + 'initLayersVisible Change:' + newVal + '----' + oldVal
      )
      this.handleLayersVisibleChange(newVal)
    },
    initFeatures: function(newVal, oldVal) {
      console.debug(this.logName + 'initFeatures Change:')
      this.vectorSource.clear(true)
      this.vectorSource.addFeatures(newVal)
    }
  },
  beforeDestroy() {
    if (this.olMap) {
      this.olMap = null
    }
    if (this.selectSingleClick) {
      this.selectSingleClick = null
    }

    if (this.overlay) {
      this.overlay = null
    }

    if (this.closer) {
      this.closer = null
    }
  },
  mounted() {
    this.id = this._uid

    this.initMap()
  },
  methods: {
    calBasemapOption: function(val) {
      return calCinradOption(val, this.appOptions.basemapOption)
    },
    calCinradLayer: function(val) {
      return this.appOptions.defaultWorkspace + ':v_' + val
    },
    calCinradCqlFilter: function(val, v1, v2) {
      if (
        val[1] === '59' ||
        val[1] === '60' ||
        val[1] === '61' ||
        val[1] === '300' ||
        val[1] === '58'
      ) {
        return "sid='" + val[0] + "'"
      }

      const _filter =
        "sid='" + val[0] + "'" + ' and color >=' + v1 + ' and color <=' + v2

      return _filter
    },
    calSize: function(val) {
      return number2size(val)
    },
    calTotalWidth: function(val) {
      let v = val
      if (this.initInfoLeft) {
        v = v + this.initInfoWidth
      }
      if (this.initInfoRight) {
        v = v + this.initInfoWidth
      }
      // console.debug(v)
      return v + 'px'
    },

    calCinradLayerParam: function(val) {
      return {
        LAYERS: this.calCinradLayer(val[1]),
        elevation: val[2],
        time: this.initDatetime[1],
        cql_filter: this.calCinradCqlFilter(val, this.minColor, this.maxColor)
      }
    },

    handleBasemapChange: function(val) {
      console.debug(this.logName + 'handleBasemapChange:' + val)
      const _olMap = this.olMap
      const _basemapOption = this.calBasemapOption(val)

      if (!_olMap || !_basemapOption) {
        console.error(this.logName + '_olMap or _basemapOption is null')
        return
      }
      const _projection = getProjection(_basemapOption.matrixSet)
      _projection.setExtent(_basemapOption.extent)
      const size = getExtentWidth(_projection.getExtent()) / 256
      const resolutions = new Array(_basemapOption.maxResolution)
      const matrixIds = new Array(_basemapOption.maxResolution)
      for (let z = 0; z < _basemapOption.maxResolution; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z)
        matrixIds[z] = z
      }

      const wmtsSource = new WMTS({
        url: _basemapOption.value,
        matrixSet: _basemapOption.matrixSet,
        format: _basemapOption.format,
        projection: _projection,
        tileGrid: new WMTSTileGrid({
          origin: getExtentTopLeft(_projection.getExtent()),
          resolutions: resolutions,
          matrixIds: matrixIds
        }),
        style: 'default',
        wrapX: true
      })

      if (_olMap.getLayers().getLength() > 0) {
        _olMap
          .getLayers()
          .getArray()[0]
          .setSource(wmtsSource)
      } else {
        _olMap.addLayer(
          new TileLayer({
            opacity: 1,
            source: wmtsSource
          })
        )
      }
    },
    handleCenterChange(newValue) {
      if (this.olMap.getView().getCenter() === newValue) {
        console.log(newValue)
      } else {
        this.olMap.getView().setCenter(newValue)
      }
    },
    handleLayersVisibleChange: function(val) {
      console.debug(this.logName + 'handleLayersVisibleChange:' + val)
      // console.debug(val.length + ':' + this.olMap.getLayers().getArray().length)
      if (val) {
        const vArr = [false, false, false, false, false, false, false, false]
        for (let j = 0; j < val.length; j++) {
          vArr[val[j]] = true
        }

        const layers = this.olMap.getLayers().getArray()
        if (vArr.length === layers.length) {
          for (let i = 0; i < vArr.length; i++) {
            if (layers[i].getVisible() !== vArr[i]) {
              layers[i].setVisible(vArr[i])
            }
          }
        }
      }
    },
    handlePointermove: function(val) {
      // console.debug(this.logName + 'handlePointermove:' + val)

      this.mouseFeature.setGeometry(new Point(val))
    },
    handleProductChange: function(val) {
      console.debug(this.logName + 'handleProductChange:' + val)
      if (compareArraysEqual(this.productValue, val)) {
        console.debug(
          this.logName + 'handleProductChange:this.productValue === val'
        )
      } else {
        this.productValue = val
        this.updateCinrad()
        this.$emit('product_change', val)
      }
    },
    handleProductChange2: function(val) {
      console.debug(this.logName + 'handleProductChange2:' + val)
      this.overlay3ProductValue = val
      this.updateCinrad()
    },
    handleProductChange3: function(val) {
      console.debug(this.logName + 'handleProductChange3:' + val)
      this.overlay4ProductValue = val
      this.updateCinrad()
    },
    handleResolutionChange(newValue) {
      if (this.olMap.getView().getResolution() === newValue) {
        console.debug(newValue)
      } else {
        this.olMap.getView().setResolution(newValue)
      }
    },
    handleSliderChange: function(val) {
      console.debug(this.logName + 'handleSliderChange:' + val)
      this.minColor = val[0]
      this.maxColor = val[1]
      this.updateCinrad()
    },

    pointermove(val) {
      // console.debug(this.logName + 'sliderChange' + val)
      this.$emit('pointer_move', val)
    },
    moveend(resolution, center) {
      console.debug(this.logName + 'moveend:' + resolution + '---' + center)
      this.$emit('move_end', resolution, center)
    },
    updateCinrad() {
      console.debug(this.logName + 'updateCinrad')
      const _this = this
      if (!_this.olMap) {
        return
      }

      const layers = _this.olMap.getLayers().getArray()
      if (layers.length === 8) {
        if (layers[1].getVisible()) {
          layers[1]
            .getSource()
            .updateParams(_this.calCinradLayerParam(_this.productValue))
        }
        if (_this.initOverlayType && layers[2].getVisible()) {
          layers[2]
            .getSource()
            .updateParams(_this.calCinradLayerParam(_this.overlay3ProductValue))
        }

        if (_this.initOverlayType && layers[3].getVisible()) {
          layers[3]
            .getSource()
            .updateParams(_this.calCinradLayerParam(_this.overlay4ProductValue))
        }

        // if (layers[7].getVisible()) {
        //  _this.vectorSource.clear(true)
        // const tmpAtt = []
        // _this.getSevereFeatures(tmpAtt)
        //  console.debug(tmpAtt)
        //  _this.vectorSource.addFeatures(tmpAtt)
        // }
      }
    },

    initMap() {
      const _this = this

      proj4.defs(
        'EPSG:4490',
        '+title=CGCS2000 +proj=longlat +ellps=GRS80 +units=degrees +no_defs'
      )
      register(proj4)

      const projection4490 = getProjection('EPSG:4490')
      // console.log(projection4490)
      projection4490.setExtent([-180, -90, 180, 90])

      console.debug(_this.initMousePositionId)

      const mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(4),
        projection: 'EPSG:4326',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        // target: document.getElementById(_this.initMousePositionId),
        // target: _this.$refs.toolBar,
        // className: 'custom-mouse-position',
        undefinedHTML: '&nbsp;'
      })

      const container = _this.$refs.cinradPopup
      const content = _this.$refs.cinradPopupContent
      _this.closer = _this.$refs.cinradPopupCloser

      _this.closer.onclick = function() {
        _this.overlay.setPosition(undefined)
        _this.closer.blur()
        return false
      }

      _this.overlay = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })

      _this.olMap = new Map({
        target: _this.$refs.cinradMap,
        view: new View({
          projection: 'EPSG:4326',
          center: calCinradCenter(_this.selectedRegion),
          zoom: _this.zoom,
          minZoom: 3,
          maxZoom: _this.maxZoom
        }),
        overlays: [_this.overlay],
        controls: defaultControls({ attribution: false, rotate: false }).extend(
          [
            mousePositionControl,
            new FullScreen({
              className: 'ol-zoom-extent',
              tipLabel: '全屏'
            })
          ]
        )
      })
      _this.olMap.getViewport().addEventListener(
        'mouseout',
        function(evt) {
          _this.mouseFeature.setGeometry(new Point([0, 0]))
        },
        false
      )

      _this.selectSingleClick = new Select()
      _this.olMap.addInteraction(_this.selectSingleClick)
      _this.selectSingleClick.on('select', function(e) {
        // console.warn(e)
        console.debug(
          'last operation selected ' +
            e.selected.length +
            ' and deselected ' +
            e.deselected.length +
            ' features'
        )

        if (e.selected.length > 0) {
          console.debug(e.selected[0].getId())

          if (e.selected[0].getId() !== _this.mouseFeatureId) {
            const prop = new GeoJSON().writeFeatureObject(e.selected[0])[
              'properties'
            ]
            _this.jsonSource = prop
            let coordinate
            if (prop['lon'] && prop['lat']) {
              // const coordinate = e.mapBrowserEvent.coordinate
              coordinate = [prop['lon'], prop['lat']]
            } else {
              coordinate = e.mapBrowserEvent.coordinate
            }
            console.debug(coordinate)
            const hdms = toStringHDMS(coordinate)

            content.innerHTML = '<div><b>经纬度:</b>' + hdms + '</div>'
            _this.overlay.setPosition(coordinate)
          } else {
            _this.overlay.setPosition(undefined)
            _this.closer.blur()
          }
        } else {
          _this.overlay.setPosition(undefined)
          _this.closer.blur()
        }
      })
      _this.olMap.on('pointermove', function(evt) {
        // When user was dragging map, then coordinates didn't change and there's
        // no need to continue
        if (evt.dragging) {
          return
        }
        // You can access coordinates from evt.coordinate now
        // console.debug(evt.coordinate)
        _this.handlePointermove(evt.coordinate)
        _this.pointermove(evt.coordinate)
      })

      _this.olMap.on('moveend', function(e) {
        _this.moveend(
          _this.olMap.getView().getResolution(),
          _this.olMap.getView().getCenter()
        )
      })

      // Add Basemap Layer
      _this.handleBasemapChange(_this.basemapValue)

      _this.olMap.addLayer(
        new ImageLayer({
          extent: _this.initExtent,
          source: new ImageWMS({
            url: _this.appOptions.wmsRadarURL,
            params: _this.calCinradLayerParam(_this.productValue),
            ratio: 1,
            serverType: 'geoserver'
          }),
          opacity: _this.initLayersOpacity[1] / 100
        })
      )

      _this.olMap.addLayer(
        new ImageLayer({
          extent: _this.initExtent,
          source: new ImageWMS({
            url: _this.appOptions.wmsRadarURL,
            params: _this.calCinradLayerParam(_this.overlay3ProductValue),
            ratio: 1,
            serverType: 'geoserver'
          }),
          opacity: _this.initLayersOpacity[2] / 100
        })
      )

      _this.olMap.addLayer(
        new ImageLayer({
          extent: _this.initExtent,
          source: new ImageWMS({
            url: _this.appOptions.wmsRadarURL,
            params: _this.calCinradLayerParam(_this.overlay4ProductValue),
            ratio: 1,
            serverType: 'geoserver'
          }),
          opacity: _this.initLayersOpacity[3] / 100
        })
      )

      _this.olMap.addLayer(
        new ImageLayer({
          source: new ImageWMS({
            url: _this.appOptions.wmsBaseURL,
            params: {
              LAYERS: _this.appOptions.layerRange,
              cql_filter: _this.computedRangeCqlFilter
            },
            ratio: 1,
            serverType: 'geoserver'
          }),
          opacity: _this.initLayersOpacity[4] / 100
        })
      )

      _this.olMap.addLayer(
        new ImageLayer({
          extent: _this.initExtent,
          source: new ImageWMS({
            url: _this.appOptions.wmsBaseURL,
            params: { LAYERS: _this.appOptions.layerBoundary },
            ratio: 1,
            serverType: 'geoserver'
          }),
          opacity: _this.initLayersOpacity[5] / 100
        })
      )

      _this.mouseFeature.setStyle(_this.mouseStyles['cross'])
      _this.mouseFeature.setId(_this.mouseFeatureId)

      _this.olMap.addLayer(
        new VectorLayer({
          source: new VectorSource({
            features: [_this.mouseFeature]
          }),
          opacity: _this.initLayersOpacity[6] / 100
        })
      )

      // _this.vectorSource.addFeature(_this.mouseFeature)
      // features[0] = _this.mouseFeature
      _this.olMap.addLayer(
        new VectorLayer({
          source: _this.vectorSource,
          opacity: _this.initLayersOpacity[7] / 100
        })
      )

      _this.handleLayersVisibleChange(_this.initLayersVisible)
    }
  }
}
</script>

<style  scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  padding: 0px;
  margin: 0px;
}

.el-aside {
  color: #333;
  padding: 0px;
  margin: 0px;
  display: block;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 0px;
  margin: 0px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 300px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: '✖';
}
.cinrad-mouse-position {
  padding: 0px 20px 0px 20px;
  color: #333;
}
.ol-full-screen {
  left: 0.5em;
  top: 2.5em;
}
</style>
